<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
        
        #box {
            width: 800px;
            height: 600px;
            margin: 0 auto;
            background-image: url(index.png);
            background-size: 100% 100%;
            position: relative;
        }
        
        .big {
            width: 253px;
            height: 423px;
            position: relative;
            top: 2px;
            margin: 0 auto;
            /*background-color: orange;*/
            border: 5px solid orange;
            opacity: 0;
        }
        
        .left,
        #left {
            width: 0;
            height: 140px;
            position: absolute;
            bottom: 14px;
            left: 286px;
            background-color: #000;
            /*opacity: 0.3;*/
            opacity: 0;
        }
        
        #left {
            width: 110px;
            z-index: 9999;
        }
        
        .right,
        #right {
            width: 0;
            height: 140px;
            position: absolute;
            bottom: 14px;
            right: 286px;
            background-color: #000;
            /*opacity: 0.3;*/
            opacity: 0;
        }
        
        #right {
            width: 110px;
            z-index: 9999;
        }
        
        p {
            margin: 20px 10px 10px 10px;
            color: white;
            font-size: 10px;
            opacity: 0;
        }
    </style>
</head>

<body>

    <div id="box">
        <div class="big"></div>
        <div id="left"></div>
        <div id="right"></div>
        <div class="left">
            <p>speclal品牌旗舰店</p>
            <p>最具传奇浪漫色彩的欧洲经典设计，带给您专属的魅力</p>
        </div>
        <div class="right">
            <p>sophe橡菲旗舰店</p>
            <p>新款韩版微笑性感红唇上衣圆领短袖修身T恤</p>
        </div>
    </div>
</body>

</html>
<script>
    // 给大图覆盖的加一个border  进入显示出来隐藏
    $('#box .big').hover(function () {
        $('#box .big').fadeTo(1000, 1);
    }, function () {
        $('#box .big').fadeTo(1000, 0);
    })


    // 左边小图覆盖两个div  一个为控制，一个为执行
    $('#box #left').hover(function () {
        
        $('#box .left').animate({
            width: 110,
            opacity: 0.5
        }, 1000, function () {
            $('.left p').css('opacity', '1')
            $('.left p').css('display', 'block')
        })
    }, function () {
        $('#box .left').animate({
            width: 0
        })
        $('.left p').css('display', 'none')
    })

    // 右边小图覆盖两个div  一个为控制，一个为执行
    $('#box #right').hover(function () {
        
        $('#box .right').animate({
            width: 110,
            opacity: 0.5
        }, 1000, function () {
            $('.right p').css('opacity', '1')
            $('.right p').css('display', 'block')
        })
    }, function () {
        $('#box .right').animate({
            width: 0
        })
        $('.right p').css('display', 'none')
    })

</script>
